<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="bootstrap.min.css">
    <link rel="stylesheet" href="single-goods.css">

</head>
<body>
<div class="container-fluid" style="background-color: #F2F2F2">
    <div class="row a">
        <div class="col-md-2"></div>
        <div class="col-md-1"><img src="logo.png"></div>
        <div class="col-md-1"></div>
        <div class="col-md-1"></div>
        <div class="col-md-1"></div>
        <div class="col-md-1"></div>
        <div class="col-md-3" style="margin-top: 30px">
            <div class="top-header">
                <ul><span class="phone">090 - 223 44 66</span></ul>
                <ul><span class="glyphicon glyphicon-envelope"><a href="">  help@trendd.com</a></span></ul>
            </div>
            <div style="clear: both"></div>
            <div class="top-middle">
                <div>
                    <ul><a href="" style="border-right:3px white solid;padding-right: 20px"><img src="img/shop2.svg"
                                                                                                 alt=""
                                                                                                 style="width: 30px;margin-top: 0px;"></a>
                    </ul>
                </div>
                <div>
                    <ul style="padding-left: 15px;margin-top: 2px"><a href="" style="color: #9B0909;font-weight:bold;">LOGIN</a>
                    </ul>
                </div>
                <div>
                    <bottom type="button" class="btn btn-danger">REGISTER</bottom>
                </div>
            </div>
        </div>
        <div class="col-md-2"></div>
    </div>
    <div class="row b">
        <div class="col-md-2"></div>
        <div class="b-user col-md-8 ">
            <ul><h4><a href="">PRODUCTS </a></h4></ul>
            <ul><h4><a href="">CAMPAINGS</a></h4></ul>
            <ul><h4><a href="">SERVICES</a></h4></ul>
            <ul><h4><a href="">BRANDS</a></h4></ul>
            <ul><h4><a href="">BRANDS</a></h4></ul>
            <ul><input type="text" class="form-control" placeholder="Search" style="border-radius: 20px;">
                <a href=""><img src="img/search.svg" alt="" style="margin-left: 170px;margin-top: -54px"></a></ul>
        </div>
    </div>
    <div class="row c">
        <div class="col-md-2"></div>
        <div class="col-md-1 c-filted">
            <a href="" style="color: white"><h4>FILTER</h4></a>
        </div>
        <div class="col-md-7"></div>
        <div class="col-md-2"></div>
    </div>
    <div class="row d">
        <div class="col-md-2"></div>
        <div class="col-md-8 d-photo">
            <div class="row">
                <div class="col-md-3">
                    <h3 style="font-weight: bolder">BRANDS</h3>
                    <ul class="d-ul list-unstyled" style="border-right:1px solid #5cb85c ;height: 200px">
                        <li><a href="">new</a></li>
                        <li><a href="">add</a></li>
                        <li><a href="">balance</a></li>
                        <li><a href="">puma</a></li>
                    </ul>
                    <ul class="d-ul list-unstyled">
                        <li><a href="">tiger</a></li>
                        <li><a href="">cat</a></li>
                        <li><a href="">docat</a></li>
                        <li><a href="">nibi</a></li>
                    </ul>
                </div>
                <div class="col-md-6 ">
                    <div class="row">
                        <div class="d-shoe col-md-4">
                            <div>
                                <h2>WOMAN</h2>
                                <a href=""><img class="d-img"
                                                src="http://demo2.cssmoban.com/cssthemes2/ftmp8_52_hb/images/img-w.jpg"
                                                alt=""></a>
                                <h4>TOTAL</h4>
                                <label>357 PRODUCTS</label>
                                <p><a href=""><img
                                        src="http://demo2.cssmoban.com/cssthemes2/ftmp8_52_hb/images/list-icon.png"
                                        alt="" style="width: 16px"></a></p>
                            </div>
                        </div>
                        <div class="d-shoe col-md-4">
                            <div>
                                <h2>MAN</h2>

                                <a href=""><img class="d-img"
                                                src="http://demo2.cssmoban.com/cssthemes2/ftmp8_52_hb/images/man-r-img.jpg"
                                                alt=""></a>
                                <h4>TOTAL</h4>
                                <label>357 PRODUCTS</label>
                                <p><a href=""><img
                                        src="http://demo2.cssmoban.com/cssthemes2/ftmp8_52_hb/images/list-icon.png"
                                        alt="" style="width: 16px"></a></p>
                            </div>
                        </div>
                        <div class="d-shoe col-md-4">
                            <div>
                                <h2>KIDS</h2>
                                <a href=""><img class="d-img"
                                                src="http://demo2.cssmoban.com/cssthemes2/ftmp8_52_hb/images/kid-r-img.jpg"
                                                alt=""></a>
                                <h4>TOTAL</h4>
                                <label>357 PRODUCTS</label>
                                <p><a href=""><img
                                        src="http://demo2.cssmoban.com/cssthemes2/ftmp8_52_hb/images/list-icon.png"
                                        alt="" style="width: 16px"></a></p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <img class="d-img"
                         src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2996810576,291798969&fm=26&gp=0.jpg"
                         style="padding-top: 20px" alt="">
                </div>
            </div>
        </div>
        <div class="col-md-2"></div>
    </div>
    <div class="row e">
        <div class="col-md-2"></div>
        <div class="col-md-8">
            <div class="row">
                <div class="col-md-4" style="padding: 0px">
                    <h2>Men'sFootwear</h2>
                    <p>Hookset Handcrafted Fabric Chukka</p>
                    <div class="box">
                        <div class="small">
                            <img src="http://demo2.cssmoban.com/cssthemes2/ftmp8_52_hb/images/product-slide/image7_thumb.jpg" alt="small Image">
                            <div class="mask"></div>
                        </div>
                        <div class="big" style="z-index: 999">
                            <img src="http://demo2.cssmoban.com/cssthemes2/ftmp8_52_hb/images/product-slide/image7_thumb.jpg" alt="Big Image">
                        </div>
                    </div>
                </div>
                <div class="col-md-8">
                    <div class="product-price">
                        <h1>174.00$</h1>
                    </div>
                    <div class="pig"><img src="img/smallpig.svg" alt=""></div>
                    <div style="clear: both"></div>
                    <p class="product-word">This is a long established fact that a reader will be distracted by the
                        readable content of a
                        page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less
                        normal distribution of letters, as opposed to using 'Content here,e</p>
                    <h4 class="product-right"><img src="img/shopcat.svg" alt=""><a href=""> Free shipping</a></h4>
                    <div style="clear: both"></div>
                    <div>
                        <div class="product-btn">
                            <button type="button" class="btn btn-danger">add to cartimg <img src="img/shopcat2.svg"
                                                                                             alt=""></button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-2"></div>
    </div>
    <div class="row f">
        <div class="col-md-2"></div>
        <div class="col-md-8 product-label">
            <div>
                <!-- Nav tabs -->
                <ul class="nav nav-tabs" role="tablist">
                    <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab"
                                                              data-toggle="tab">Product overwiev</a></li>
                    <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Features</a>
                    </li>
                    <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Customer reviews</a>
                    </li>
                </ul>
                <!-- Tab panes -->
                <div class="tab-content">
                    <div role="tabpanel" class="tab-pane fade in active" id="home">
                        <h3>DESCRIPTION:</h3>
                        <p>With its beautiful premium leather,
                            lace-up
                            oxford styling, recycled rubber outsoles and 9-inch height, this Earthkeepers City Premium
                            style
                            is an undeniably handsome boot. To complement its rustic, commanding outer appearance, we've
                            paid attention to the inside as well - by adding SmartWool® faux shearling to the linings
                            and
                            crafting the footbed using our exclusive anti-fatigue comfort foam technology to absorb
                            shock.
                            Imported.</p>
                        <h3>DETAILS:</h3>
                        <p>Premium burnished full-grain leather and suede upper</p>

                        <p>Leather is from a tannery rated Silver for its water, energy and waste-management practices</p>

                        <p>    Leather lining and footbed for a premium feel and optimal comfort</p>

                         <p>   SmartWool® faux shearling lining is made with 60% merino wool and 40% PET</p>

                         <p>   Reflective insole board for additional warmth under foot
                        </p>
                    </div>
                    <div role="tabpanel" class="tab-pane fade in" id="profile">
                        <h3>DESCRIPTION:</h3>
                        <p>With its beautiful premium leather,
                            lace-up
                            oxford styling, recycled rubber outsoles and 9-inch height, this Earthkeepers City Premium
                            style
                            is an undeniably handsome boot. To complement its rustic, commanding outer appearance, we've
                            paid attention to the inside as well - by adding SmartWool® faux shearling to the linings
                            and</p>
                        <p>    crafting the footbed using our exclusive anti-fatigue comfort foam technology to absorb
                            shock.
                            Imported.
                            lace-up oxford styling, recycled rubber outsoles and 9-inch height, this Earthkeepers City
                            Premium style is an undeniably handsome boot. To complement its rustic, commanding outer
                            appearance,
                        </p>
                        <h3>DETAILS:</h3>
                        <p>Premium burnished full-grain leather and suede upper</p>

                        <p>Leather is from a tannery rated Silver for its water, energy and waste-management practices</p>

                        <p>    Leather lining and footbed for a premium feel and optimal comfort</p>

                        <p>   SmartWool® faux shearling lining is made with 60% merino wool and 40% PET</p>

                        <p>   Reflective insole board for additional warmth under foot
                        </p>
                    </div>
                    <div role="tabpanel" class="tab-pane fade in" id="messages">
                        <h3>DESCRIPTION:</h3>
                        <p>With its beautiful premium leather,
                            lace-up
                            oxford styling, recycled rubber outsoles and 9-inch height, this Earthkeepers City Premium
                            style
                            is an undeniably handsome boot. To complement its rustic, commanding outer appearance, we've
                            paid attention to the inside as well - by adding SmartWool® faux shearling to the linings
                            and
                            crafting the footbed using our exclusive anti-fatigue comfort foam technology to absorb
                            shock.
                            Imported.</p>
                        <h3>DETAILS:</h3>
                        <p>Premium burnished full-grain leather and suede upper</p>

                        <p>Leather is from a tannery rated Silver for its water, energy and waste-management practices</p>

                        <p>    Leather lining and footbed for a premium feel and optimal comfort</p>

                        <p>   SmartWool® faux shearling lining is made with 60% merino wool and 40% PET</p>

                        <p>   Reflective insole board for additional warmth under foot
                        </p>
                    </div>
                </div>

            </div>

        </div>
        <div class="col-md-2"></div>
    </div>
</div>

<script src="jquery-3.3.1.min.js"></script>
<script src="js/bootstrap.min.js"/>
<script src="js/npm.js"/>
<script>
    $('#myTabs a').click(function (e) {
        e.preventDefault()
        $(this).tab('show')

    })

</script>
<script type="text/javascript">
    window.onload = function(){
        // 鼠标放到小盒子上时，大盒子图片同等比例移动
        //技术点：onmouseenter==onmouseover 第一个不冒泡
        //技术点：onmouseleave==onmouseout  第一个不冒泡
        //步骤：
        //1.鼠标放上去显示盒子，移开隐藏盒子
        //2.mask跟随移动
        //3.右侧的大图片，等比例移动

        var box = document.getElementsByClassName("box")[0];
        var small = box.firstElementChild || box.firstChild;
        var big = box.children[1];
        var mask = small.children[1];
        var bigImg = big.children[0];

        // 1.鼠标放上去显示盒子，移开隐藏盒子（为小盒子绑定事件）

        // 调用封装好的方法，显示元素
        small.onmouseenter = function(){
            show(mask);
            show(big);
        }
        // 调用封装好的方法，隐藏元素
        small.onmouseleave = function(){
            hide(mask);
            hide(big);
        }

        // 2. mask跟随鼠标移动
        // 绑定事件是onmousemove，事件源是small，只要在小盒子上移动1px，mask也要跟随移动
        small.onmousemove = function(event){
            // 想移动mask，需要知道鼠标在small中的位置，x作为mask的left值，y作为mask的top值
            event = event || window.event;
            // 获取鼠标在整个页面的位置
            var pagex = event.pageX || scroll().left + event.clientX;
            var pagey = event.pageY || scroll().top + event.clientY;
            // 让鼠标在mask的最中间，减去mask宽高的一半，x、y为mask的坐标
            // console.log(pagex + " " + pagey);
            var x = pagex - box.offsetLeft - mask.offsetWidth/2;
            var y = pagey - box.offsetTop - mask.offsetHeight/2;
            // 限制mask的范围，left取值大于0，小于小盒子的宽减mask的宽
            console.log(x)
            console.log(y)
           /* console.log(small.offsetWidth)
            console.log(mask.offsetWidth)*/
           x = x-250;
           y = y-550;
            console.log(x)
            console.log(y)
            if(x<0){
                x = 0;
            }
            if(x>small.offsetWidth - mask.offsetWidth){
                x = small.offsetWidth - mask.offsetWidth;
            }
            if(y<0){
                y = 0;
            }
            if(y> small.offsetHeight - mask.offsetHeight){
                y = small.offsetHeight - mask.offsetHeight;
            }

            console.log(x)
            console.log(y)
            // 移动mask
           // console.log("x:" + x + " y:" + y);
            mask.style.left = x + "px";
            mask.style.top = y + "px";

            //3.右侧的大图片，等比例移动
            // 大图片/大盒子 = 小图片/mask盒子
            // 大图片走的距离/mask走的距离 = （大图片-大盒子）/（小图片-mask）
            //比例var times = (bigImg.offsetWidth-big.offsetWidth)/(small.offsetWidth-mask.offsetWidth);
            //大图片走的距离/mask盒子走的距离 = 大图片/小图片
            var times = bigImg.offsetWidth/small.offsetWidth;
            var _x = x * times;
            var _y = y * times;

            bigImg.style.marginLeft = -_x + "px";
            bigImg.style.marginTop = -_y + "px";
        }
    }
    // 显示隐藏元素
    function show(element){
        element.style.display = "block";
    }
    function hide(element){
        element.style.display = "none";
    }
</script>

</body>
</html>